<template>
	<div class="container">
		<div class="container-header">
			<h1>欢迎, {{ username }} !</h1>
			<a href="#" v-on:click="changePassword">更换密码</a>
			<a href="#" v-on:click="signOut">登出</a>
		</div>
		<div>
			<div class="data-box">
				<svg class="logo" width="96" height="96" viewBox="0 0 24 24">
					<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></path>
				</svg>
				<h1 class="header">{{ userRole }}</h1>
				<p class="footer">你的身份</p>
			</div>

			<div class="data-box">
				<svg class="logo" width="96" height="96" viewBox="0 0 24 24">
					<path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
				</svg>
				<h1 class="header header-blue">{{ countDescription }}</h1>
				<p class="footer">账目数量</p>
			</div>

			<div class="data-box">
				<svg class="logo" width="96" height="96" viewBox="0 0 24 24">
				<path d="M17.45,15.18L22,7.31V19L22,21H2V3H4V15.54L9.5,6L16,9.78L20.24,2.45L21.97,3.45L16.74,12.5L10.23,8.75L4.31,19H6.57L10.96,11.44L17.45,15.18Z"></path>
				</svg>
				<h1 class="header">{{ assetDescription }}</h1>
				<p class="footer">资产状况: {{ stateDescription }}</p>
			</div>
		</div>

		<div>
			<div class="data-box">
				<svg class="logo" width="96" height="96" viewBox="0 0 24 24">
				<path d="M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z"></path>
				</svg>
				<h1 class="header">{{ prevAmountDescription }}</h1>
				<p class="footer">上一个账单</p>
			</div>

			<div class="data-box">
				<svg class="logo" width="96" height="96" viewBox="0 0 24 24">
				<path d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z"></path>
				</svg>
				<h1 class="header header-green">{{ incomeDescription }}</h1>
				<p class="footer">这个月的收入</p>
			</div>

			<div class="data-box">
				<svg class="logo" width="96" height="96" viewBox="0 0 24 24">
				<path d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"></path>
				</svg>
				<h1 class="header">{{ expenditureDescription }}</h1>
				<p class="footer">这个月的支出</p>
			</div>
		</div>
	</div>
</template>

<script>
import {bus} from '../main.js'

export default{
	name: 'userpanel',
	data() {
		return {
			isAdmin: false,
			accountCount: 0,
			asset: 0,
			prevAccountID: 0,
			username: '',
			income: 0,
			expenditure: 0,
			historyIncome: 0,
			historyExpenditure: 0
		}
	},
	methods: {
		changePassword: function(){
			bus.$emit('show_changepwd_modal')
		},

		signOut: function(){
			bus.$emit('sign_out')
		}
	},
	mounted: function(){
		bus.$on('did_add_account', function(accountID){
			if(window.delegate.currentUser == null){
				return undefined
			}
			let amount = window.delegate.getAccount(accountID).amount
			if(amount < 0){
				this.expenditure = this.expenditure - amount
				this.historyExpenditure = this.historyExpenditure - amount
			}else{
				this.income = this.income + amount
				this.historyIncome = this.historyIncome + amount
			}
			this.accountCount = window.delegate.getAccountIDList().length
			this.prevAccountID = accountID
		}.bind(this))

		this.username = window.delegate.currentUser.username
		this.isAdmin = window.delegate.amIAdmin()
		let accountIDList = window.delegate.getAccountIDList()
		if(accountIDList == null){
			this.amount = 0
			this.income = 0
			this.expenditure = 0
			this.historyIncome = 0
			this.historyExpenditure = 0
			this.prevAccountID = -1
			this.accountCount = 0
			return
		}
		this.accountCount = accountIDList.length
		this.prevAccountID = accountIDList[accountIDList.length - 1]
		let dateObj = new Date()
		let month = dateObj.getMonth()
		let year = dateObj.getYear()
		let income = 0
		for(let accountID in accountIDList){
			let account = window.delegate.getAccount(accountID)
			let accountDate = new Date(account.timeStamp)
			if(accountDate.getYear() == year && accountDate.getMonth() == month){
				if(account.amount < 0){
					this.historyExpenditure = this.historyExpenditure - account.amount
					this.expenditure = this.expenditure - account.amount
				}else{
					this.historyIncome = this.historyIncome + account.amount
					this.income = this.income + account.amount
				}
			}else{
				if(account.amount < 0){
					this.historyExpenditure = this.historyExpenditure - account.amount
				}else{
					this.historyIncome = this.historyIncome + account.amount
				}
			}
		}

	},
	computed: {
		userRole: function(){
			if(this.isAdmin){
				return '管理员'
			}else{
				return '普通用户'
			}
		},

		incomeDescription: function(){
			let income = this.income.toFixed(2)
			return `+ ¥${income}`
		},

		expenditureDescription: function(){
			let expenditure = this.expenditure.toFixed(2)
			return `- ¥${expenditure}`
		},

		assetDescription: function(){
			let asset = this.historyIncome - this.historyExpenditure
			asset = asset.toFixed(2)
			if(asset < 0){
				asset = Math.abs(asset)
				return `- ¥${asset}`
			}else{
				return `+ ¥${asset}`
			}
		},

		stateDescription: function(){
			let asset = this.historyIncome - this.historyExpenditure
			if(asset < 0){
				return '负债'
			}else{
				return '无负债'
			}
		},

		countDescription: function(){
			if(this.accountCount == 0){
				return '你还没记账呢!'
			}
			return `${this.accountCount} 个`
		},

		prevAmountDescription: function(){
			if(this.accountCount == 0){
				return '你还没记账呢!'
			}
			let amount = window.delegate.getAccount(this.prevAccountID).amount.toFixed(2)
			if(amount < 0){
				amount = Math.abs(amount)
				return `- ¥${amount}`
			}else{
				return `+ ¥${amount}`
			}

		}
	}
}
</script>

<style scoped>

.data-box{
	background-color: white;
	width: 300px;
	height: 120px;
	font-family: sans-serif;
	padding: 20px;
	display: inline-block;
	margin-right: 20px;
	margin-top: 20px;
	vertical-align: top;
	border: 1px solid gray;
}

.header{
	float: right;
	position: relative;
	right: 10px;
	color: darkred;
}

.logo{
	margin-top: 10px;
	height: 96px;
	width: 96px;
	float: left;
}

.footer{
	float: right;
	position: relative;
	clear: both;
	bottom: 30px;
	right: 15px;
}

.container{
	background-color: rgba(255, 255, 255, 0.5);
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 20px;
	text-align: center;
}

.header-green{
	color: green;
}

.header-blue{
	color: blue;
}

.container-header{
	font-family: sans-serif;
	color: rgba(50, 50, 50, 1);
}

.container-header a{
	margin-right: 20px;
	color: rgba(50, 50, 50, 1);
	text-decoration: none;
}
</style>